[Android] 基本的なアニメーションで作りにくいアニメーションの作り方

まえがき

いつもはKotlinネタですが、今日はAndroid小ネタです。

Androidアニメーション作る時、ScaleAnimationだったり、RotateAnimationだったり、基本的なアニメーションを組み合わせてAnimationSetとかで、作るわけです。

基本的なアニメーションの組み合わせで難しい場合、ValueAnimatorを使うと自前でタイマーや加速度せず比較的簡単作れちゃいます。

例えば、色のアニメーションやスロットアプリのようなリールアニメーションを基本的な移動、拡大、透過のアニメーションで作ろうとするとしんどいですよね？

ValueAnimator

オレンジから青にグラデーションしながら１秒で切り替わるようにつくってみよう。

    fun colorAnimation(view: View, fromColor: Int, toColor: Int) =
            ValueAnimator.ofFloat(0f, 1f).apply {
                duration = 1000
                addUpdateListener {
                    val animatedReverseFraction = 1 - it.animatedFraction
                    val color = Color.rgb(
                            (fromColor.red * animatedReverseFraction + toColor.red * it.animatedFraction).toInt(),
                            (fromColor.green * animatedReverseFraction + toColor.green * it.animatedFraction).toInt(),
                            (fromColor.blue * animatedReverseFraction + toColor.blue * it.animatedFraction).toInt()
                    )
                    view.setBackgroundColor(color)

                }
                start()
            }

    val Int.red get() = Color.red(this)
    val Int.blue get() = Color.blue(this)
    val Int.green get() = Color.green(this)

ポイントは、0fから1fに値を1000msで変化させています。値の変化だけなので好きにアニメーション作りたい放題です！これで加速度、タイマーを自前で作らないでよくなります。

addUpdateListenerで値が変化しときの処理を書きます。どのくらいで呼ばれているかチェックするとわかるですが、16~17msで呼ばれているみたいですので、60fpsでアニメーションを作ることができます。簡単ですね。

色のグラデーションの計算は、中間色をとる感じの計算になります。

RGBの各要素を取得するの面倒だったので、ついでに拡張プロパティを作りました。

まとめ

加速度も簡単に設定できるので、覚えておくと何かと役にたつかも!